<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>websoket 前端代码测试</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
  <style>
    .content {
      position: relative;
      border: 5px solid green;
      width: 100%;
      min-height: 600px;
    }

    .content div {
      position: absolute;
      border: 2px solid blue;
    }
  </style>
</head>

<body>
  <button onClick="send()">点击发送</button>
  <input type="text" placeholder="请输入" id="inputBox">
  <div class="content" id="contentBox">

  </div>

  <script>
    var inputBox = document.getElementById("inputBox");
    var contentBox = document.getElementById("contentBox");
    // 使用websoket 测试
    var websocket = null;
  //判断当前浏览器是否支持WebSocket
  if('WebSocket' in window) {
   //改成你的地址，ws 代表普通的ws 协议
  //  websocket = new WebSocket("ws://192.168.100.196:8082/api/websocket/100");
   websocket = new WebSocket("ws://localhost:3000")
  // websocket = new WebSocket("wss://localhost:3000/")
  } else {
   alert('当前浏览器 Not support websocket')
  }

  //连接发生错误的回调方法
  websocket.onerror = function() {
   setMessageInnerHTML("WebSocket连接发生错误");
  };

  //连接成功建立的回调方法
  websocket.onopen = function() {
   setMessageInnerHTML("WebSocket连接成功");
  }
  var U01data, Uidata, Usdata
  //接收到消息的回调方法
  websocket.onmessage = function(event) {
   console.log(event);
   setMessageInnerHTML(event.data);
   
  }

  //连接关闭的回调方法
  websocket.onclose = function() {
   setMessageInnerHTML("WebSocket连接关闭");
  }

  //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
  window.onbeforeunload = function() {
   closeWebSocket();
  }

  //将消息显示在网页上
  function setMessageInnerHTML(innerHTML) {
    contentBox.innerHTML += innerHTML + '<br/>';
  }

  //关闭WebSocket连接
  function closeWebSocket() {
   websocket.close();
  }

  //发送消息，注意这里发送的是一个字符串
  function send() {
    var message  = inputBox.value;

   websocket.send('{"msg":"' + message + '"}'); // chrome 中websoket 协议绿色部分
   setMessageInnerHTML(message + "&#13;");    
  }


      

     
  </script>
</body>

</html>